<template>
  <div class="ele-body">
    <el-card shadow="never">
      <!-- 搜索表单 -->
      <role-search @currentIndex="reload" />
      <!-- 数据表格 -->

      <ele-pro-table ref="table"
                     :columns="columns"
                     :datasource="datasource"
                     :selection.sync="selection"
                     tool-class="ele-toolbar-form"
                     row-key="id">
        <!-- 表头工具栏 -->
        <template v-slot:toolbar>

        </template>

        <template v-slot:icon="{ row }">
          <div><img class="categoryImages"
                 :src="row.icon"
                 alt="" /></div>
        </template>

        <template v-slot:status="{ row }">
          <el-switch :active-value="1"
                     :inactive-value="0"
                     v-model="row.status"
                     @change="editStatus(row)" />
        </template>
        <!-- 状态列 -->

        <template v-slot:discount_money="{ row }">
          <div>
            {{ row.discount_money }}
          </div>
        </template>
        <template v-slot:sort="{ row }">
          <i class="sort-handle el-icon-rank ele-text-secondary"
             style="cursor: move"></i>
          <div v-if="false">{{ row }}</div>
        </template>
        <!-- 操作列 -->
        <template v-slot:action="{ row }">
          <el-link type="primary"
                   :underline="false"
                   icon="el-icon-edit"
                   @click="openEdit(row)">
            修改
          </el-link>

          <!-- <el-popconfirm class="ele-action"
                         title="确定要删除该条信息？"
                         @confirm="remove(row)">
            <template v-slot:reference>
              <el-link type="danger"
                       :underline="false"
                       icon="el-icon-delete">
                删除
              </el-link>
            </template>
          </el-popconfirm> -->
        </template>
      </ele-pro-table>
    </el-card>
    <!-- 编辑弹窗 -->
    <role-edit :data="current"
               :drawerEditBoolen.sync="drawerEditBoolen"
               @done="reload" />
    <!-- 权限分配弹窗 -->
  </div>
</template>
	
	<script>


import RoleSearch from './components/role-search';
// import Sortable from 'sortablejs';
import RoleEdit from './components/role-edit';
import { carouselList } from './constant/constant';

import { moduleList, upModuleStatus } from '@/api/HomePageSettings/index'

// import {
//   sitecCategoriesDelete,
//   siteCategoriesList,
//   siteCategoriesModify,
//   siteCategoriesDetail,
//   siteBatchCategoriesDelete
// } from '@/api/serviceManagement/categoriesList';
export default {
  name: 'Recharge',
  components: {
    RoleSearch,
    RoleEdit
  },
  data () {
    return {
      carouselList,
      // 表格列配置
      columns: [

        // {
        //   prop: 'id',
        //   label: '排序',
        //   sortable: 'custom',
        //   showOverflowTooltip: true,
        //   minWidth: 30,
        //   align: 'center',
        //   slot: 'sort'
        // },
        {
          columnKey: 'index',
          type: 'index',
          label: '序号',
          width: 60,
          align: 'center',
          showOverflowTooltip: true,
          fixed: 'left'
        },

        {
          prop: 'icon',
          label: '首页工具图片',
          sortable: 'custom',
          width: 105,
          align: 'center',
          showOverflowTooltip: true,
          slot: 'icon'
        },
        {
          prop: 'name',
          label: '首页工具名称',
          sortable: 'custom',
          align: 'center',
          showOverflowTooltip: true
        },
        {
          prop: 'sort',
          label: '首页工具排序',
          sortable: 'custom',

          showOverflowTooltip: true,

          align: 'center'
        },

        {
          prop: 'status',
          label: '展示状态',
          align: 'center',
          sortable: 'custom',

          showOverflowTooltip: true,
          slot: 'status'
        },

        {
          columnKey: 'action',
          label: '操作',

          align: 'center',
          resizable: false,
          slot: 'action',
          hideInSetting: true,
          showOverflowTooltip: true
        }
      ],
      // 表格选中数据
      selection: [],
      // 当前编辑数据
      current: null,

      // 是否显示编辑弹窗
      drawerEditBoolen: false,
      // 是否显示导入弹窗
      showAuth: false,
      showChoose: false
    };
  },
  mounted () {

  },
  //   activated () {
  //     this.reload({ template_id: 1 });
  //   },
  computed: {},

  methods: {


    /* 表格数据源 */
    datasource ({ page, limit, where }) {
      return moduleList({
        page,
        limit,
        type: 1,
        ...where,

      });
    },
    /* 刷新表格 */
    reload (where) {
      console.log(where)
      this.$refs.table.reload({ page: 1, where: where });
    },
    /* 显示编辑 */
    async openEdit (row) {
      console.log(row);
      if (row?.id) {
        // const res = await siteCategoriesDetail(row.id);

        this.current = row;
        // 用户余额管理
        this.drawerEditBoolen = !this.drawerEditBoolen;
      } else {
        this.drawerEditBoolen = !this.drawerEditBoolen;
        this.current = null;
      }
    },

    /* 更改状态 */
    editStatus (row) {
      const loading = this.$loading({ lock: true });
      upModuleStatus({
        id: row.id,
        status: row.status == 0 ? 0 : 1,

      })
        .then((msg) => {
          console.log(msg)
          loading.close();
          this.$message.success(msg.message);
          this.reload();
        })
        .catch((e) => {
          loading.close();
          row.status = !row.status ? 1 : 2;
          this.$message.error(e.message);
        });
    },

    /* 显示分配权限 */
    openAuth (row) {
      this.current = row;
      this.showAuth = true;
    },


  }
};
	</script>
	
	<style lang="less">
.categoryImages {
  width: 50px;
  height: 50px;
}
</style>
	